<template>
  <q-header elevated>
    <q-toolbar class="topbar">
      <div
        class="row justify-between items-center"
        style="width: 100%; height: 100%"
      >
        <div class="row col">
          <!-- <q-btn
            class="q-mx-sm"
            flat
            dense
            round
            icon="menu"
            aria-label="Menu"
            @click="toggleDrawer"
          />-->
          <q-toolbar-title class="q-ml-md">
            <q-img
              src="/icons/logo.png"
              style="width: 86px; height: 28px"
              @click="gotoHome"
            />
          </q-toolbar-title>
        </div>

        <div class="col">
          <search-bar />
        </div>

        <div class="col row justify-end no-wrap">
          <q-btn
            rounded
            icon="mdi-earth"
            text-color="sub"
            no-caps
            no-wrap
            :label="selectedLanguage.length"
          >
            <q-popup-proxy>
              <language-selector />
            </q-popup-proxy>
          </q-btn>
          <q-btn
            rounded
            flat
            icon="account_circle"
            color="sub"
            @click="openLoginDialog"
            no-caps
            no-wrap
            v-singular-event:btn:topbar-login
            >{{ $t('common.signIn') }}</q-btn
          >
          <q-btn
            rounded
            color="accent"
            @click="openRegisterDialog"
            no-caps
            no-wrap
            v-singular-event:btn:topbar-register
            >{{ $t('common.createAccount') }}</q-btn
          >
          <q-btn padding="xs" flat icon="more_vert" color="sub">
            <guest-menu />
          </q-btn>
        </div>
      </div>
    </q-toolbar>
  </q-header>
  <q-dialog
    v-model="showLoginDialog"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <login-view
      @to-signup="toSignup"
      @finish="onLoginFinish"
      transition-show="slide-up"
      transition-hide="slide-down"
    />
  </q-dialog>
  <q-dialog
    v-model="showRegisterDialog"
    persistent
    maximized
    transition-show="slide-down"
    transition-hide="slide-up"
  >
    <register-view @to-signin="toSignin" @finish="onRegFinish" />
  </q-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import SearchBar from 'components/searcher/SearchBar.vue';
import LoginView from 'components/login/LoginView.vue';
import RegisterView from 'components/login/RegisterView.vue';
import GuestMenu from './GuestMenu.vue';
import LanguageConfig from 'src/models/LanguageConfig';
import LanguageSelector from './LanguageSelector.vue';
import { useRouter } from 'vue-router';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'src/stores/user-store';
export default defineComponent({
  name: 'MyLayout',
  emits: ['toggleDrawer'],
  components: {
    SearchBar,
    LoginView,
    RegisterView,
    GuestMenu,
    LanguageSelector,
  },
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const userStore = useUserStore();
    const router = useRouter();
    let searchString = ref('');
    const selectedLanguage = computed<LanguageConfig[]>(
      () => userStore.selectedLanguage
    );
    let showLoginDialog = computed({
      get() {
        return globalStore.showSigninDialog;
      },
      set(value: boolean) {
        globalStore.showSigninDialog = value;
      },
    });
    let showRegisterDialog = computed({
      get() {
        return globalStore.showSignupDialog;
      },
      set(value: boolean) {
        globalStore.showSignupDialog = value;
      },
    });
    return {
      searchString,
      showLoginDialog,
      showRegisterDialog,
      selectedLanguage,
      toggleDrawer() {
        emit('toggleDrawer');
      },
      openLoginDialog() {
        showLoginDialog.value = true;
      },
      openRegisterDialog() {
        showRegisterDialog.value = true;
      },
      toSignup() {
        showLoginDialog.value = false;
        showRegisterDialog.value = true;
      },
      toSignin() {
        showLoginDialog.value = true;
        showRegisterDialog.value = false;
      },
      onLoginFinish() {
        showLoginDialog.value = false;
      },
      onRegFinish() {
        showRegisterDialog.value = false;
      },
      gotoHome() {
        router.replace({ name: 'Home' });
      },
    };
  },
});
</script>
